<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>问卷制作</title>
<%@include file="/WEB-INF/jsp/public/commons.jspf"%>
<script src="${pageContext.request.contextPath }/script/jquery-migrate-1.1.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/script/jquery.form.js"></script>
</head>
<body>
<ol class="breadcrumb">
  <li><a href="home_innerCentre.action">首页</a></li>
  <li><a href="questionnaire_list.action">问卷管理</a></li>
  <li class="active">编辑问卷</li>
</ol>
<div class="well well-lg">
	<!-- 问卷标题显示 -->
	<div class="page-header text-center">
	    <h1>${questionnaire.title}<br/>&nbsp;&nbsp;&nbsp;
	        <small>${questionnaire.description}</small>
	    </h1>
	</div>
	<!-- 问卷内容显示 -->
	<div id="content" class="container">
	
	</div>
	<!-- 添加题目按钮 -->
    <div class="jumbotron text-center">
        <div data-toggle="modal" data-target="#myModal">
    	 	<h1><small>点击添加题目</small></h1>
        </div>
    </div>
    <!-- 完成按钮 -->
    <div class="text-center">
		<a href="questionnaire_delete.action?id=${questionnaire.id}" class="btn btn-warning">取消</a>
		<a href="questionnaire_list.action" class="btn btn-success">保存</a>
    </div>
</div>
</body>
 
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
      <form id="form">
      <input type="hidden" name="questionnaireId" value="${questionnaire.id}"/>
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">添加题目</h4>
         </div>
         <div class="modal-body">
            <div class="form-group" style="padding-top: 15px">
			  <input type="text" class="form-control" name="title" placeholder="请输入题目">
			</div>
			<button type="button" class="btn btn-success" id="addoption">添加选项</button>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="subForm" data-dismiss="modal">添加</button>
         </div>
         </form>
      </div>
	</div>
</div>
<!--一些会用的页面元素，隐藏-->
<div hidden="hidden" id="editoption">
	<!-- 添加答案的模块 -->
    <div style='padding-top: 10px'>
        <div class='row'>
            <div class='col-sm-8'>
                <input type='text' class='form-control' name='option' placeholder='请输入选项'>
            </div>
            <div class='col-sm-4'>
                <button type='button' class='btn btn-warning' name="deleteBut">删除</button>
            </div>
        </div>
    </div>
    <!-- 显示题目的模块 -->
    
</div>
<script>
    $(function(){
    	//定义一个题目的编号
    	var serial=1;
    	
    	//添加选项
    	$("#addoption").click(function(){
    	var $option="";
    	$option=$("#editoption").children().clone(true);//克隆
        $(".modal-body").append($option);
    	});
    	//删除选项
     	$("[name='deleteBut']").click(function(){
    		$(this).parent().parent().parent().parent().children().last().remove();
    	});
    	
    	//表单提交
    	$("#subForm").click(function(){
    		//提交数据
			var option={
				type:'POST',
				url:'question_add.action',
				dataType:'text',
				success:function(data){
					var jsonObj=$.parseJSON(data);
					//数据回显
					var html="";//定义一个html
					if(jsonObj!=null){
						html+="<div><p class='lead'>"+serial+"、"+jsonObj.title+"</p>";
						for(var o in jsonObj.options){
							html+="<label class='checkbox-inline' style='margin-bottom:5px;'><input type='radio' disabled='disabled'>"+jsonObj.options[o].content+"</label><br/>";
						}
						html+="</div><br/>";
					}
					$("#content").append(html);
					serial+=1;
				}
			};
			//提交表单
			$("#form").ajaxSubmit(option);
    	});
    });
</script>
</html>